import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_datetime_picker/flutter_cupertino_datetime_picker.dart';
import 'package:get/get.dart';
import 'package:mtf/app/data/UsdRecordEntity.dart';
import 'package:mtf/app/modules/usd_record_module/usd_record_controller.dart';
import 'package:mtf/app/theme/app_boxDecoration.dart';
import 'package:mtf/app/theme/app_colors.dart';
import 'package:mtf/app/widget/AppBarLeftTitle.dart';
import 'package:mtf/app/widget/HcIconText.dart';
import 'package:mtf/app/widget/SettingBar.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import '../../utils/AppUtils.dart';
/**
 * GetX Template Generator - fb.com/htngu.99
 * */

class usd_recordPage extends GetView<usd_recordController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBarLeftTitle(title: "USD明细"),
        body: OrderPages()
      // ListView.builder(
      //   itemBuilder: (context, index) {
      //     if (index == 0) {
      //       return Padding(
      //         padding: const EdgeInsets.only(top: 10, left: 10, right: 10),
      //         child: Row(children: [
      //           InkWell(
      //             onTap: () {
      //               showPickClassify();
      //             },
      //             child: Container(
      //                 padding:
      //                     EdgeInsets.symmetric(vertical: 5, horizontal: 9),
      //                 decoration: BoxDecoration(
      //                     color: Colors.white,
      //                     borderRadius: BorderRadius.circular(14)),
      //                 child: HcIconText(
      //                   label: Text("全部分类"),
      //                   icon: Icon(
      //                     Icons.arrow_drop_down_outlined,
      //                     size: 18,
      //                   ),
      //                   spacing: 0,
      //                   reverse: true,
      //                 )),
      //           ),
      //           InkWell(
      //             onTap: () {
      //               showDatePickerForTime(Get.context!!);
      //             },
      //             child: Container(
      //               padding: EdgeInsets.symmetric(vertical: 5, horizontal: 9),
      //               decoration: BoxDecoration(
      //                   color: Colors.white,
      //                   borderRadius: BorderRadius.circular(14)),
      //               child: Row(
      //                 children: [
      //                   Text(
      //                     "2022-09-14",
      //                     style: TextStyle(color: c_333333, fontSize: 12),
      //                   ),
      //                   Icon(
      //                     Icons.arrow_forward,
      //                     color: c_bbbbbb,
      //                     size: 15,
      //                   ),
      //                   Text(
      //                     "2022-09-14",
      //                     style: TextStyle(color: c_333333, fontSize: 12),
      //                   ),
      //                   SizedBox(
      //                     width: 6,
      //                   ),
      //                   Icon(
      //                     Icons.calendar_today_outlined,
      //                     color: c_999999,
      //                     size: 15,
      //                   )
      //                 ],
      //               ),
      //             ),
      //           )
      //         ], mainAxisAlignment: MainAxisAlignment.spaceBetween),
      //       );
      //     } else {
      //
      //     }
      //   },
      //   shrinkWrap: true,
      //   itemCount: 2,
      // ),
    );
  }

  Widget OrderPages() {
    return RefreshConfiguration(
      headerBuilder: () => ClassicHeader(),
      footerBuilder: () => ClassicFooter(),
      child: SmartRefresher(
        controller: controller.refreshController,
        enablePullDown: true,
        enablePullUp: true,
        onRefresh: () {
          controller.refreshData();
        },
        onLoading: () {
          controller.loadData();
        },
        child: Container(
          margin: EdgeInsets.all(10),
          decoration: r10WhiteDecoration,
          child: Obx(() {
            return ListView.separated(
                physics: NeverScrollableScrollPhysics(),
                separatorBuilder: (context, index) {
                  return Container(
                      margin: EdgeInsets.symmetric(horizontal: 15),
                      child: Divider(height: 1));
                },
                itemBuilder: (context, index) {
                  return itemChange(controller.usdList[index]);
                },
                itemCount: controller.usdList.length,
                shrinkWrap: true);
          }),
        ),
      ),
    );
  }

  Widget itemChange(ListUSDElement bean) {
    return Container(
      margin: EdgeInsets.only(bottom: 10, left: 10, right: 10),
      padding: EdgeInsets.only(bottom: 15),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(10)),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        SettingBar(leftText: bean.actionTxt ?? "",
            paddingHorizontal: 0,
            leftIconSpace: 0,
            rightIconSpace: 0,
            rightText: "订单号：${bean.order ?? ""}",
            rightTextColor: c_666666,
            rightTextSize: 12,
            backgroupColor: Colors.transparent,
            showDivider: true),
        SizedBox(height: 15,),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Text("交易品种", style: TextStyle(color: c_999999, fontSize: 12),),
          Text(
            "交易量(手数)", style: TextStyle(color: c_999999, fontSize: 12),),
          Text(
            "交易价格(USD)", style: TextStyle(color: c_999999, fontSize: 12),),
        ],),
        SizedBox(height: 5,),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Text(bean.symbol ?? "",
            style: TextStyle(color: c_333333, fontSize: 14),),
          Text(bean.volumeTxt.toString() ?? "",
            style: TextStyle(color: c_333333, fontSize: 14),),
          Text(
            bean.price ?? "", style: TextStyle(color: c_333333, fontSize: 14),),
        ],),
        SizedBox(height: 10,),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Text("手续费(USD)", style: TextStyle(color: c_999999, fontSize: 12),),
          Text(
            "隔夜利息(USD)", style: TextStyle(color: c_999999, fontSize: 12),),
          Text("盈亏(USD)", style: TextStyle(color: c_999999, fontSize: 12),),
        ],),
        SizedBox(height: 5,),
        Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          Text(bean.priceTp ?? "",
            style: TextStyle(color: c_333333, fontSize: 14),),
          Text(bean.storage ?? "",
            style: TextStyle(color: c_333333, fontSize: 14),),
          Text(bean.profit ?? "",
            style: TextStyle(color: c_333333, fontSize: 14),),
        ],),
        SizedBox(height: 10,),
        Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Text("时间", style: TextStyle(color: c_999999, fontSize: 12),),
          SizedBox(height: 5,),
          Text(AppUtils.dateToString(bean.timeAt),
            style: TextStyle(color: c_333333, fontSize: 14),),
        ],)
      ],),
    );
  }

  Widget orderItem(ListUSDElement bean) {
    var infoMap = bean.infoMap();
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 15),
      width: double.infinity,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Flex(
              direction: Axis.horizontal,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "序号：${bean.num.toString() ?? ""}",
                  style: TextStyle(color: c_333333, fontSize: 15),
                ),
                Text(
                  "订单号：${bean.order ?? ""}",
                  style: TextStyle(color: c_333333, fontSize: 15),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 5,
          ),
          GridView.builder(
            padding: EdgeInsets.symmetric(vertical: 10),
            physics: NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10.0, //水平子 Widget 之间间距
              crossAxisCount: 3, //一行的 Widget 数量
              childAspectRatio: 2,
              mainAxisSpacing: 10,
            ),
            itemBuilder: (context, index) {
              return Flex(direction: Axis.vertical,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(infoMap[index].valueTxt ?? ""),
                  SizedBox(height: 3,),
                  Text(infoMap[index].keyTxt ?? ""),
                ],);
            },
            shrinkWrap: true,
            itemCount: infoMap.length,),
          Align(
            alignment: Alignment.centerRight,
            child: Text(
              bean.timeAt.toString(),
              style: TextStyle(color: c_999999, fontSize: 12),
            ),
          )
        ],
      ),
    );
  }

  showDatePickerForTime(BuildContext context) {
    String _format = 'yyyy-MMMM-dd';
    showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10), topRight: Radius.circular(10))),
        context: Get.context!!,
        builder: (context) {
          return SingleChildScrollView(
            child: Container(
              width: double.infinity,
              decoration: rt10WhiteDecoration,
              child: ListView.builder(
                  itemCount: 4,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    if (index == 0) {
                      return Container(
                        width: double.infinity,
                        padding: EdgeInsets.only(top: 15, left: 15, right: 15),
                        child: Stack(
                          children: [
                            Center(
                                child: Text(
                                  "选择日期",
                                  style: TextStyle(
                                      fontSize: 16,
                                      color: c_333333,
                                      fontWeight: FontWeight.w500),
                                )),
                            InkWell(
                              onTap: () {
                                Get.back();
                              },
                              child: Align(
                                child: Icon(
                                  Icons.close,
                                  color: c_bbbbbb,
                                ),
                                alignment: Alignment.centerRight,
                              ),
                            )
                          ],
                        ),
                      );
                    } else if (index == 1) {
                      return Container(
                        margin: EdgeInsets.only(top: 20),
                        child: Flex(
                          direction: Axis.horizontal,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              padding: EdgeInsets.symmetric(
                                  vertical: 7, horizontal: 11),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8),
                                  border:
                                  Border.all(color: c_f12f38, width: 2)),
                              child: HcIconText(
                                icon: Icon(Icons.calendar_today_outlined,
                                    size: 16, color: c_333333),
                                label: Text(
                                  "2022-09-14",
                                  style: TextStyle(color: c_333333),
                                ),
                              ),
                            ),
                            Padding(
                              padding:
                              const EdgeInsets.symmetric(horizontal: 10),
                              child: Text("至"),
                            ),
                            Container(
                              padding: EdgeInsets.symmetric(
                                  vertical: 7, horizontal: 11),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8),
                                  border:
                                  Border.all(color: c_f12f38, width: 2)),
                              child: HcIconText(
                                icon: Icon(Icons.calendar_today_outlined,
                                    size: 16, color: c_333333),
                                label: Text(
                                  "2022-09-14",
                                  style: TextStyle(color: c_333333),
                                ),
                              ),
                            ),
                          ],
                        ),
                      );
                    } else if (index == 2) {
                      return TimePickerWidget(
                        pickerTheme: DateTimePickerTheme(showTitle: false),
                        minDateTime: DateTime.parse("2012-01-01"),
                        maxDateTime: DateTime.parse("2040-01-01"),
                        minuteDivider: 15,
                        locale: DateTimePickerLocale.zh_cn,
                        dateFormat: _format,
                        onCancel: () => print('onCancel'),
                        onChange: (dateTime, List<int> index) {},
                        onConfirm: (dateTime, List<int> index) {},
                      );
                    } else {
                      return Container(
                        margin:
                        const EdgeInsets.only(top: 30, left: 10, right: 10),
                        width: double.maxFinite,
                        height: 48,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(24),
                          color: c_f12f38,
                        ),
                        child: TextButton(
                            child: Text("提交",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold)),
                            onPressed: () {}),
                      );
                    }
                  }),
            ),
          );
        });
  }

  showPickClassify() {
    var array = ["分类1", "分类2", "分类3", "分类4"];
    showModalBottomSheet(
        isScrollControlled: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10), topRight: Radius.circular(10))),
        context: Get.context!!,
        builder: (context) {
          return SingleChildScrollView(
            child: Container(
              width: double.infinity,
              decoration: rt10WhiteDecoration,
              child: ListView.builder(
                  itemCount: 3,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    if (index == 0) {
                      return Container(
                        width: double.infinity,
                        padding: EdgeInsets.only(top: 15, left: 15, right: 15),
                        child: Stack(
                          children: [
                            Center(
                                child: Text(
                                  "选择日期",
                                  style: TextStyle(
                                      fontSize: 16,
                                      color: c_333333,
                                      fontWeight: FontWeight.w500),
                                )),
                            InkWell(
                              onTap: () {
                                Get.back();
                              },
                              child: Align(
                                child: Icon(
                                  Icons.close,
                                  color: c_bbbbbb,
                                ),
                                alignment: Alignment.centerRight,
                              ),
                            )
                          ],
                        ),
                      );
                    } else if (index == 1) {
                      return SizedBox(
                        width: double.infinity,
                        height: 150,
                        child: CupertinoPicker(
                          itemExtent: 30,
                          useMagnifier: true,
                          selectionOverlay: _selectionOverlayWidget(),
                          backgroundColor: Colors.white,
                          onSelectedItemChanged: (value) {},
                          children: array
                              .map((e) =>
                              Center(
                                child: Text(e),
                              ))
                              .toList(),
                        ),
                      );
                      ;
                    } else {
                      return Container(
                        margin:
                        const EdgeInsets.only(top: 30, left: 10, right: 10),
                        width: double.maxFinite,
                        height: 48,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(24),
                          color: c_f12f38,
                        ),
                        child: TextButton(
                            child: Text("提交",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold)),
                            onPressed: () {}),
                      );
                    }
                  }),
            ),
          );
        });
  }

  // 中间分割线
  Widget _selectionOverlayWidget() {
    return Padding(
      padding: EdgeInsets.only(left: 0, right: 0),
      child: Column(
        children: [
          Divider(
              height: 1
          ),
          Expanded(child: Container()),
          Divider(
              height: 1
          ),
        ],
      ),
    );
  }
}
